<template>
	<div ref="goods" @click="$router.push(`/productionDetail/${data.goods_id}`)" class="d-flex bg-white my-2 p-3">
		<img :src="data.goods_image" class="d-block mx-auto" alt="">
		<div class="ml-3">
			<p>
				{{ data.goods_name }}
			</p>
			<p style="color: #acacac;">
				已售{{data.goods_sales}}件
			</p>
			<p>
				<span style="color: #ff6315; font-size: 20px;">
					￥{{data.goods_price_max}}
				</span>
				<s style="color: #8a8a8a;">
					{{data.line_price_max === "0.00" ? '' : '￥' + data.line_price_max}}
				</s>
			</p>
		</div>
	</div>
</template>

<script>
	export default{
		name:'AppGoods',
		props:{
			data:{
				type:Object,
				requeired:true
			},
			tog:{
				type:Boolean
			}
		},
		methods:{
			styleToggle() {
				this.$refs.goods.classList.toggle('flex-wrap')
			}
		},
		mounted() {
			this.$on('tog',() =>{
				this.styleToggle()
			})
			if(this.tog) return this.styleToggle()
		}
	}
</script>

<style scoped>
	@import url('../style/bootstrap.css');
	img{
		width: 132px;
		height: 132px;
	}
	p{
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
	[ref="goods"]{
		transition: 0.5s;
	}
</style>